<template>
	<view>
		<remind-carinfo :dataBean="dataBean"></remind-carinfo>

		<view class="item" v-for="(item, index) in dataBean.illegal" :key="index">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="违章情况" label-color="#333333" :customStyle="{'line-height': '80rpx',}">
				</u-icon>

				<text style="line-height: 80rpx; color: #E93131;">{{item.illegalStatusShow}}</text>
			</view>


			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view class="text-line">
				<text class="text-name">车辆订单号:</text>
				<text class="text-value">{{item.orderCarNo|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">车辆订单状态:</text>
				<text class="text-value">{{(item.carOrderStatusShow|filterNull)+"/km"}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">租赁类型:</text>
				<text class="text-value">{{(item.rentTypeShow|filterNull)+"/km"}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">客户名称:</text>
				<text class="text-value">{{item.customerName|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">联系电话:</text>
				<text class="text-value">{{item.customerTel|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">违章地点:</text>
				<text class="text-value">{{item.illegalLocation|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">违章时间:</text>
				<text class="text-value">{{item.illegalTime|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">违章内容:</text>
				<text class="text-value">{{item.illegalTypeShow|filterNull}}</text>
			</view>


			<u-line color="#efefef" border-style="dashed" :customStyle="{'display': 'block',}">
			</u-line>

			<view style="display: inline-flex; justify-content: flex-start; align-items: center;">

				<view class="points">

					<text class="points-text">扣</text>
					<text class="points-value">{{item.pointsDeduction + "分"}}</text>
					<text class="points-text" style="margin-left: 20rpx;">罚</text>
					<text class="points-value">{{item.illegalFines + "元"}}</text>

				</view>

				<view style="flex-grow: 1;">
				</view>

				<view class="btn-detail" @click="goDetail(item)">
					详 情
				</view>
				<view class="btn-detail" @click="goHandle(item)">
					记 录
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import remindCarinfo from '../../components/remind-carinfo.vue';

	export default {
		components: {
			remindCarinfo,
		},

		data() {
			return {
				dataBean: {
					vehicle:{},
					orderCar:{},
					illegal:[]
				},
				carId: '',
				maintenanceId: '',
			}
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: './illegaldetail-handle?type=2&orderCarNo=' + item.orderCarNo + "&illegalId=" + item
						.illegalId,
					// url: './addmaintain?carId=' + this.carId + "&maintenanceId=" + this.maintenanceId,
				})
			},

			goHandle(item) {
				uni.navigateTo({
					url: './illegaldetail-handle?type=1&orderCarNo=' + item.orderCarNo + "&illegalId=" + item
						.illegalId,
					// url: './addmaintain?carId=' + this.carId + "&maintenanceId=" + this.maintenanceId,
				})
			}
		},
		filters: {
			filterNull(val) {
				if (val) {
					return val;
				} else {
					return '--';
				}
			}
		},

		onLoad(op) {
			this.carNo = op.carNo;
			this.carCode = op.carCode;
			
			uni.setNavigationBarTitle({
				title: this.carNo + "违章情况"
			})
			
			if(1 == op.comeType){
				//从违章查询来的
				this.dataBean = getApp().globalData.illegaldetail;
				
				getApp().globalData.illegaldetail={}
			}else{
				this.$u.api.illegalDetail({
					carCode: op.carCode,
				}).then(
					res => {
						this.dataBean = res;
					}
				
				);
			}

			

			
		}
	}
</script>

<style lang="scss">
	.points {
		display: inline-flex;
		align-items: center;
		width: auto;
		height: 42rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		padding: 0 10rpx;
		border: solid $yellowffc 1.6rpx;
		background-color: #FFF4CC;


		.points-text {
			color: $white;
			border-radius: 8rpx;
			background-color: $yellowffc;
			padding: 0rpx 4rpx;
		}

		.points-value {
			color: $yellowffc;
			margin-left: 4rpx;
		}
	}



	.btn-detail {
		width: 170rpx;
		height: 55rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		align-self: flex-end;
		margin: 10rpx 20rpx 10rpx 0;
	}

	.nodata {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 200rpx;
			height: 100rpx;
		}

		text {
			margin-top: 35rpx;
			margin-bottom: 60rpx;
			font-size: 24rpx;
			color: #C5D3E8;
		}
	}
</style>
